// 显示图表
var echarts_show = {
    el:"",
    init:function(el){
        this.el = el;
        console.log(this.el);
        this.judge_type();
    },
    //根据传入id对需要显示的图表进行判断
    judge_type:function(){
        switch(this.el){
            case "tpl-echarts":
                this.loading_show();
                this.loading_stop();
                this.show_region();
            break;
            case "terminal-echarts":
            case "pieecharts":
                this.loading_show();
                this.loading_stop();
                this.show_login();
            break;
            case "post_echarts":
                this.loading_show();
                this.loading_stop();
                this.show_post();
            break;
            default:
            break;
        }
    },
    //地图组件
    show_region:function(){
        var myChart = echarts.init(document.getElementById(this.el)); 
        var data = [{
            name: "北京",
            value: 38
        }, {
            name: "广东",
            value: 147
        }, {
            name: "浙江",
            value: 74
        }, {
            name: "江苏",
            value: 33
        }, {
            name: "四川",
            value: 192
        }, {
            name: "重庆",
            value: 35
        }, {
            name: "贵州",
            value: 0
        }, {
            name: "山东",
            value: 36
        }, {
            name: "云南",
            value: 32
        }, {
            name: "黑龙江",
            value: 7
        }, {
            name: "吉林",
            value: 1
        }, {
            name: "陕西",
            value: 63
        }, {
            name: "辽宁",
            value: 29
        }, {
            name: "内蒙",
            value: 48
        }, {
            name: "福建",
            value: 61
        }];
        function getxAxisData(data){
            var res = [];
            for(i in data){
                var item = data[i];
                res.push(item.name);
            }
            return res;
        }

        function NumDescSort(a,b){
            return b.value - a.value;
        }

        var resultdata = [];
        resultdata=data.sort(NumDescSort);
        var bardata = resultdata.slice(0,10);  //柱状图top10
        var option = {
            tooltip:{
                trigger:"item"
            },
            //视觉映射组件
            visualMap:{
                left:"left",
                top:"bottom",
                text:["高","低"],
                calculabel:true,  //是否显示拖拽的手柄
                inRange:{
                    color:['#eaf3fc', '#0084e1']
                },
                textStyle: {
                    color: '#838FA1'
                },
                dimension:0  //指定用数据那个维度映射到视觉元素上
            },
            toolbox:{
                show:false,
                orient:"vertical",  //工具栏icon布局朝向
                left:"right",
                top:"center",
                feature:{
                    dataView:{
                        readOnly:false
                    },
                    saveAsImage:{}
                }  //各项工具配置项
            },
            textStyle: {
                color: '#838FA1'
            },
            //直角坐标系内绘制网格
            grid:{
                right:40,
                top:40,
                bottom:20,
                width:'30%',
            },
            xAxis:[
            {
                type:"value",
                position:"top",
                axisLine:{
                    show:false
                },
                axisTick:{
                    show:false
                },  //坐标轴刻度 
            }
            ],
            yAxis:[
            {
                type:"category",
                inverse:true,  //是否反向坐标轴
                boundaryGap:true,
                axisLine:{
                    show:false
                },
                axisTick:{
                    show:false,
                    alignWithLabel:true
                },
                data:getxAxisData(bardata)
            }
            ],
            series:[
            {
                name:"浏览量分布",
                type:"map",
                mapType:"china",
                // roam:true,  //是否开启鼠标平移和缩放
                zoom:1,  //缩放
                left:"8%",
                zlevel:1,  //canvas分层
                label:{
                    normal:{
                        show:false
                    },
                    emphasis:{
                        areaColor:"#ffe167",
                        show:false
                    }//是否在高亮下显示
                },  //图形上的文本标签
                itemStyle:{
                    normal: {
                         borderColor:'rgba(255,255,255,0.9)',
                         borderWidth:1
                    },
                    // 高亮状态下地图样式
                    emphasis:{
                         areaColor: '#ffe167',
                         borderWidth: 0,
                         opacity:0.9
                    }
                },
                data:resultdata
            },
            {
                name:"浏览数据top10",
                type:'bar',
                label:{
                    normal:{
                        show:false
                    },
                    emphasis:{
                        show:true,
                        position:"right",
                        offset:[0,0],
                        textStyle:{
                            color:"#fff",
                            fontSize:14,
                        }
                    }
                },
                itemStyle:{
                    normal:{
                        color:"#eaf3fc"
                    },
                    emphasis:{
                        color:"#0084e1"
                    }
                },
                barWidth:"20px",
                data:bardata
            }
            ]
        }

        myChart.setOption(option);
    },
    //登录类型
    show_login:function(){
        var dom = document.getElementById(this.el);
        var myChart = echarts.init(dom);
        var option_pie = null;
        options_pie = {
                    title : {
                        text: '用户终端类型',
                        x:'center',
                        textStyle: {
                            color: '#838FA1'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['unkown','STB','PC','Android Phone','Android Pad','iOS Phone','iOS Pad','Web'],
                        textStyle: {
                            color: '#838FA1'
                        }
                    },
                    color:['#58b1f9','#7fc4fc','#cde2fa','#5dc485','#88d9a0','#b5ebc5','#ffe167','#ffb59b'],
                    // color:['#58b1f9','#5dc485','#f2686a','#c7ddf6','#f5c162','#00d2b5','#dda669','#4c9ad5'],
                    animate:true,
                    series : [
                        {
                            name: '终端类型',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:335, name:'unkown'},
                                {value:310, name:'STB'},
                                {value:155, name:'PC'},
                                {value:135, name:'Android Phone'},
                                {value:121, name:'Android Pad'},
                                {value:107, name:'iOS Phone'},
                                {value:77, name:'iOS Pad'},
                                {value:56, name:'Web'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

        console.log(options_pie && typeof options_pie === "object");

        if (options_pie && typeof options_pie === "object") {
            myChart.setOption(options_pie, true);
            console.log(1);
        }
    },
    //用户登录类型
    show_post:function(){
        var option_post = {
        title : {
            text: '用户登录类型统计',
            subtext: '测试数据\n',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} {b} :{d}%",
             textStyle: {
                        fontSize:14
                    }
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['PC端','移动端','机顶盒']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        grid: [
            {x: '7.5%',y: '65%', width: '88%', height: '30%'},
        ],
        xAxis: [
            {gridIndex: 0,
            type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: ['七月','八月','九月']},
        ],
        yAxis: [
            {gridIndex: 0,name:'年级',show:false
            },
        ],
        series : [
            {
                name: '用户登录类型',
                type: 'pie',
                //roseType:'radius',
                radius : '45%',
                center: ['50%', '33%'],
                data:[
                    {value:21, name:'PC端'},
                    {value:28-21-4, name:'移动端'},
                    {value:4, name:'机顶盒'},
                    /*{value:335, name:'3'},
                    {value:1548, name:'4'},
                    {value:1548, name:'5'}*/
                ],
                label: {
                normal: {
                    position: 'outside',
                    formatter: '{a} :{b} {c}份',
                     textStyle: {
                        color: '',
                        fontSize: 14
                    }
                }
            },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                name: '',
                type: 'pie',
                //roseType:'radius',
                radius : '22%',
                center: ['23%', '76.2%'],
                data:[
                    {value:0, name:'PC端'},
                    {value:0, name:'移动端'},
                    {value:0, name:'机顶盒'},
                    /*{value:335, name:'3'},
                    {value:1548, name:'4'},
                    {value:1548, name:'5'}*/
                ],
                label: {
                normal: {
                    position: 'inner',
                    formatter: '{c}份',
                     textStyle: {
                        color: '#ffffff',
                        fontSize: 14
                    }
                }
            },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                name: '',
                type: 'pie',
                //roseType:'radius',
                radius : '22%',
                center: ['51%', '77%'],
                data:[
                    {value:0, name:'PC端'},
                    {value:0, name:'移动端'},
                    {value:0, name:'机顶盒'},
                    /*{value:335, name:'3'},
                    {value:1548, name:'4'},
                    {value:1548, name:'5'}*/
                ],
                label: {
                normal: {
                    position: 'inner',
                    formatter: '{c}份',
                     textStyle: {
                        color: '#ffffff',
                        fontSize: 14
                    }
                }
            },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
               }
            },
            {
                name: '',
                type: 'pie',
                //roseType:'radius',
                radius : '22%',
                center: ['80%', '77%'],
                data:[
                    {value:7, name:'PC端'},
                    {value:0, name:'移动端'},
                    {value:0, name:'机顶盒'},
                    /*{value:335, name:'3'},
                    {value:1548, name:'4'},
                    {value:1548, name:'5'}*/
                ],
                label: {
                normal: {
                    position: 'outside',
                    formatter: '{c}份',
                     textStyle: {
                        color: '',
                        fontSize: 14
                    }
                }
            },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
        ]
        }; 
        var dom_post = document.getElementById("post_echarts");
        var myChart_post = echarts.init(dom_post);
        myChart_post.setOption(option_post, true);
    },
    //动画加载
    loading_show:function(){
        layer.load();
        var left_= $(".tabs-con").offset().left;
        $(".layui-layer-content").css({
            "margin-top":$(".tabs-con").css("margin-top"),
            "margin-left":left_,
        });
        console.log(left_);
        $(".tabs-con").css("opacity",0)
    },
    loading_stop:function(){
        setTimeout(function(){
            layer.closeAll('loading');
            $(".tabs-con").stop().animate({"opacity":1});
        }, 300);
    },
}

// 点击筛选项
$(".group").find("li").on("click",function(){
    $(this).parent("ul").find("li").removeClass("cur");
    $(this).addClass("cur");
});